<template>
  <div class="page-box">
    <el-card class="page-box-card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        label-width="88px"
        inline
      >
        <el-form-item label="APPID" prop="param.appId">
          <el-input
            v-model="queryParams.param.appId"
            placeholder="请输入APPID"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="接口名称" prop="param.name">
          <el-input
            v-model="queryParams.param.name"
            placeholder="请输入接口名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="调用状态" prop="param.status">
          <el-select
            v-model="queryParams.param.status"
            placeholder="请选择调用状态"
          >
            <el-option
              v-for="item in dict.type.sys_notice_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调用时间" prop="param.time">
          <el-date-picker
            v-model="queryParams.param.time"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="dataList" style="width: 100%">
        <!-- 接口名称、应用APPID、调用状态、调用时间、调用参数、响应、耗时 -->
        <el-table-column type="index" label="排序" width="60" />
        <el-table-column prop="name" label="接口名称" width="180">
        </el-table-column>
        <el-table-column prop="appId" label="应用APPID" width="180">
        </el-table-column>
        <el-table-column prop="status" label="调用状态" width="120">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_notice_status"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column prop="time" label="调用时间" width="180">
        </el-table-column>
        <el-table-column prop="param" label="调用参数"> </el-table-column>
        <el-table-column prop="response" label="响应"> </el-table-column>
        <el-table-column prop="input" label="耗时"> </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(scope.row, scope.index)"
              >详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 接口日志详细 -->
    <el-dialog
      title="接口日志详细"
      :visible.sync="open"
      width="800px"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item label="APPID">{{ form.appId }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="接口名称">{{ form.name }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调用参数">{{ form.param }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调用响应">{{ form.response }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调用时间">{{ form.time }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="耗时(毫秒)">{{
              form.timeConsuming
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调用状态">
              <el-tag type="success" v-if="form.status == '0'">成功</el-tag>
              <el-tag type="danger" v-else-if="form.status == '1'">失败</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryLog } from "@/api/collect/task";
export default {
  dicts: ["sys_notice_status"],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      selectionData: [],
      queryParams: {
        param: {
          appId: undefined,
          name: undefined,
          status: undefined,
          time: [],
        },
      },
      props: {
        checkStrictly: true,
        label: "name",
        value: "id",
      },
      dataList: [],
      total: 0,
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      rules: {
        name: [{ required: true, message: "请输入接口名称", trigger: "blur" }],
      },
    };
  },
  created() {
    // this.getList();
    console.log('this.$route.params: ', this.$route.query);
    const id = this.$route.params && this.$route.query.id;
    if (id !== undefined && id != 0) {
      this.queryParams.param.appId = id;
    }
    this.getList();
  },
  methods: {
    /** 详细按钮操作 */
    handleView(row) {
      this.open = true;
      this.form = row;
    },
    // 搜索事件
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置事件
    resetQuery() {
      this.dataList = [];
      this.total = 0;
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 获取数据列表
    getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      if (params.param.time && params.param.time.length > 1) {
        params.param.startTime = params.param.time[0];
        params.param.endTime = params.param.time[1];
      } else {
        params.param.startTime = null;
        params.param.endTime = null;
      }
      params.param.jobType = "2";
      queryLog(params).then((response) => {
        this.dataList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
  },
};
</script>
